<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人主页</title>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="swiper-4.5.0/dist/css/swiper.min.css">
    <link rel="stylesheet" href="css/style.css">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>

<body>
    <div class="banner">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="img/1.png" alt="" class="img1">
                </div>
                <div class="swiper-slide">
                    <img src="img/2.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="img/3.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="img/4.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="img/5.jpg" alt="">
                </div>
            </div>
        </div>
        <div class="banner-1">
            <div class="banner-1-m">
                <div class="banner-img">
                    <img src="img/avatar-1.png" alt="">
                </div>
                <h1>Hello , I'm Shulan</h1>
                <h3>我叫马淑兰</h3>
                <p>Life doesn't get easier, you just get stronger</p>
            </div>
        </div>

    </div>
    <div class="nav-inner" id="nav">
        <div class="nav clearfix">
            <div class="nav-left clearfix">
                <div class="logo">

                </div>
                <div class="mz" id="mz">
                    <p id="hg1">Shulan</p>
                    <p id="hg2">个人简历</p>
                </div>
            </div>
            <div class="nav-right">
                <ul class="clearfix">
                    <li class="active"><a href="#d1"><span>关于我</span></a></li>
                    <li><a href="#d2"><span>前端技能</span></a></li>
                    <li><a href="#d3"><span>作品展示</span></a></li>
                    <li><a href="#d4"><span>心路历程</span></a></li>
                    <li><a href="#d5"><span>联系我</span></a></li>
                </ul>
            </div>
            <div class="nav-right-1">

                <div class="t">
                    <span></span>
                </div>
                <div class="t1">
                    <span></span>
                </div>

            </div>
            <ul class="clearfix c-1">
                <li class="active"><a href="#d1"><span>关于我</span></a></li>
                <li><a href="#d2"><span>前端技能</span></a></li>
                <li><a href="#d3"><span>作品展示</span></a></li>
                <li><a href="#d4"><span>心路历程</span></a></li>
                <li><a href="#d5"><span>联系我</span></a></li>
            </ul>
        </div>
    </div>

    <div class="main">
        <div class="main-1 about" id="d1">
            <div class="container" id="c1">
                <div class="row text-center r-1">
                    <div class="col-md-12">
                        <span>关于我</span>
                        <hr>
                        <span>About Me</span>
                    </div>
                </div>
                <div class="row r-2 mt-5">
                    <div class="col-3">
                        <div class="img text-center">
                            <img src="img/btn-1.png" alt="">
                        </div>

                        <div class="gy mt-4">
                            <p>年龄</p>
                            <p>19</p>
                        </div>
                    </div>
                    <div class="col-3">
                        <div class="img text-center">
                            <img src="img/btn-2.png" alt="">
                        </div>

                        <div class="gy mt-4">
                            <p>学历</p>
                            <p>大专</p>
                        </div>
                    </div>
                    <div class="col-3">
                        <div class="img text-center">
                            <img src="img/btn-3.png" alt="">
                        </div>

                        <div class="gy mt-4">
                            <p>坐标</p>
                            <p>泊头</p>
                        </div>
                    </div>
                    <div class="col-3">
                        <div class="img text-center">
                            <img src="img/btn-4.png" alt="">
                        </div>

                        <div class="gy mt-4">
                            <p>状态</p>
                            <p>在校</p>
                        </div>
                    </div>
                </div>
                <div class="row r-3">
                    <div class="col-md-12 mt-5">
                        <p>我是一个性格沉稳冷静、做事认真的人。对前端开发怀有热情和强烈的好奇心，不给自己设边界，更喜欢细致地感受它。</p>
                        <p>精通html和css制作符合w3c标准的页面，能够使用CSS3实现各种网页动效。理解结构、样式和行为的分离。 对javascript有一定了解，能编写基本的原生JS组件。了解并使用部分前端框架如:bootstrap等等...，可以用AJAX来实现异步，在无需加载整个页面的情况下，更新部分网页,运用AJAX来调取json数据。</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="main-2 skill" id="d2">
            <div class="container" id="c2">
                <div class="row r-1 text-center">
                    <div class="col-md-12">
                        <span>前端技能</span>
                        <hr>
                        <span>Web Skill</span>
                    </div>
                </div>
                <div class="row r-2 mt-5">
                    <div class="col-md">
                        <div class="front">
                            <img src="img/bg-1.png" alt="">
                            <p>HTML</p>
                            <img src="img/xz.png" alt="">
                        </div>
                        <div class="back">
                            <ul>
                                <li>深刻理解Web标准</li>
                                <li>熟练运用html标签</li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md c-1">
                        <div class="front">
                            <img src="img/bg-2.png" alt="">
                            <p>CSS</p>
                            <img src="img/xz.png" alt="">
                        </div>
                        <div class="back">
                            <ul>
                                <li>熟练运用css及css3新属性</li>
                                <li>注重浏览器兼容性</li>
                                <li>掌握@keyframes制作动画效果</li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md c-1">
                        <div class="front">
                            <img src="img/bg-3.png" alt="">
                            <p>JAVASCRIPT</p>
                            <img src="img/xz.png" alt="">
                        </div>
                        <div class="back">
                            <ul>
                                <li>能编写基本的原生JS组件</li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md c-1">
                        <div class="front">
                            <img src="img/bg-4.png" alt="">
                            <p>BOOTSTRAP</p>
                            <img src="img/xz.png" alt="">
                        </div>
                        <div class="back">
                            <ul>
                                <li>熟悉Bootstrap样式和组件的书写</li>
                                <li>熟练运用其处理响应式页面</li>
                            </ul>
                        </div>
                    </div>
                </div>



                <div class="row r-3 mt-3">
                    <div class="col-md"></div>
                    <div class="col-md c-1">
                        <div class="front">
                            <img src="img/bg-5.png" alt="">
                            <p>AJAX</p>
                            <img src="img/xz.png" alt="">
                        </div>
                        <div class="back">
                            <ul>
                                <li>可以用AJAX来实现异步，在无需加载整个页面的情况下，更新部分网页</li>
                                <li>运用AJAX来调取json</li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md c-1">
                        <div class="front">
                            <img src="img/bg-6.jpg" alt="">
                            <p>VUE</p>
                            <img src="img/xz.png" alt="">
                        </div>
                        <div class="back">
                            <ul>
                                <li>了解如vue-cli,webpack,vue-router,git等的使用</li>
                                <li>前后端分离开发</li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md"></div>
                </div>
            </div>
        </div>
        <div class="main-3 works" id="d3">
            <div class="container" id="c3">
                <div class="row r-1 text-center">
                    <div class="col-md-12">
                        <span>作品展示</span>
                        <hr>
                        <span>Some Demo</span>
                    </div>
                </div>
                <div class="row r-2 text-center mt-5">
                    <div class="col-md c-1">
                        <a href="" class="img">
                            <img src="img/monster-1.png" alt="">
                        </a>
                        <a href="http://mmssll.gitee.io/yiqidabian-meidi" class="nr">
                            <h5>美的</h5>
                            <img src="img/bb-2.png" alt="">
                        </a>
                    </div>
                    <div class="col-md c-1">
                        <a href="" class="img">
                            <img src="img/monster-2.png" alt="">
                        </a>
                        <a href="http://mmssll.gitee.io/bootstrap4yunbawangzhan" class="nr">
                            <h5>云巴网</h5>
                            <img src="img/bb-2.png" alt="">
                        </a>
                    </div>
                    <div class="col-md c-1">
                        <a href="" class="img">
                            <img src="img/monster-3.png" alt="">
                        </a>
                        <a href="http://mmssll.gitee.io/erqidabian-jiaolanjiaren" class="nr">
                            <h5>娇兰佳人</h5>
                            <img src="img/bb-2.png" alt="">
                        </a>
                    </div>
                    <div class="col-md c-1">
                        <a href="" class="img">
                            <img src="img/monster-4.png" alt="">
                        </a>
                        <a href="http://mmssll.gitee.io/ajax-javascript-api-tianqi" class="nr">
                            <h5>天气网</h5>
                            <img src="img/bb-2.png" alt="">
                        </a>
                    </div>



                    <div class="col-md c-1">
                        <a href="" class="img">
                            <img src="img/monster-4.png" alt="">
                        </a>
                        <a href="http://mmssll.gitee.io/tianya_mingyue_knife" class="nr">
                            <h5>天涯明月刀</h5>
                            <img src="img/bb-2.png" alt="">
                        </a>
                    </div>
                    <div class="col-md c-1">
                        <a href="" class="img">
                            <img src="img/monster-3.png" alt="">
                        </a>
                        <a href="http://mmssll.gitee.io/duitangwangye" class="nr">
                            <h5>堆糖网</h5>
                            <img src="img/bb-2.png" alt="">
                        </a>
                    </div>
                    <div class="col-md c-1">
                        <a href="" class="img">
                            <img src="img/monster-2.png" alt="">
                        </a>
                        <a href="http://mmssll.gitee.io/taobao_homepage" class="nr">
                            <h5>淘宝网</h5>
                            <img src="img/bb-2.png" alt="">
                        </a>
                    </div>
                    <div class="col-md c-1">
                        <a href="" class="img">
                            <img src="img/monster-1.png" alt="">
                        </a>
                        <a href="http://myljp.top/#/" class="nr">
                            <h5>驿友旅行</h5>
                            <img src="img/bb-2.png" alt="">
                        </a>
                    </div>


                </div>

                <div class="row r-3">
                    <div class="col-md-12">
                        <p>更多作品 , 待更新 . . .</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="main-4 course" id="d4">
            <div class="container" id="c4">
                <div class="row r-1 text-center mb-5">
                    <div class="col-md-12">
                        <span>心路历程</span>
                        <hr>
                        <span>Mental Journey</span>
                    </div>
                </div>
                <div class="row r-2">
                    <div class="c-1">
                        <ul>
                            <li class="li-1">
                                <span>1</span>
                                <span>简单的自我介绍</span>
                            </li>
                            <li>
                                <span>2</span>
                                <span>为什么想做前端工程师？</span>
                            </li>
                            <li>
                                <span>3</span>
                                <span>优势和不足？</span>
                            </li>
                            <li>
                                <span>4</span>
                                <span>我的想法是？</span>
                            </li>
                        </ul>
                    </div>
                    <div class="cc-2">
                        <div class="c-2 li-1">
                            <div class="introduce-1">
                                <p>你好！我叫马淑兰</p>
                                <p>来自河北省张家口蔚县</p>
                                <p>爱好：喜欢听音乐和旅行</p>
                                <p>人生格言是：失败并不可怕，可怕的是你害怕失败</p>
                            </div>
                        </div>
                        <div class="c-2">
                            <div class="introduce-1">
                                <p>喜欢研究代码</p>
                                <p>对前端有强烈的好奇心</p>
                                <p>可以实现自己想要的效果，有成就感</p>
                                <p>看好这个专业的就业前景</p>
                            </div>
                        </div>
                        <div class="c-2">
                            <div class="introduce-1">
                                <p>我的不足是：社交能力不够</p>
                                <p>缺少工作经验</p>
                                <p>我的优势是：做事认真</p>
                                <p>负责、有强烈的团队意识</p>
                            </div>
                        </div>
                        <div class="c-2">
                            <div class="introduce-1">
                                <p>有人说</p>
                                <p>IT是个青春饭</p>
                                <p>但我</p>
                                <p>要到敲不动为止</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="main-5 contact" id="d5">
            <div class="container" id="c5">
                <div class="row r-1 text-center">
                    <div class="col-md-12">
                        <span>联系我</span>
                        <hr>
                        <span>Contact Me</span>
                    </div>
                </div>
                <div class="row r-2 mt-5">
                    <div class="col-md c-1">
                        <div class="row  rr-1 text-center">
                            <div class="col-3">
                                <em class="dream1">灵感</em>
                            </div>
                            <div class="col-3">
                                <em class="dream1">代码</em>
                            </div>
                            <div class="col-3">
                                <em class="dream1">梦想 </em>
                            </div>
                            <div class="col-3">
                                <em class="dream1">未来</em>
                            </div>
                        </div>
                        <div class="row text-center mt-5">
                            <div class="col-md">
                                <div class="saying">
                                    <p>学习是一个充实愉悦的过程</p>
                                    <p>注重效率，勇于尝试</p>
                                    <p>喜欢尝试，期待新鲜事物</p>
                                    <p>前端即兴趣，兴趣即未来</p>
                                </div>
                            </div>
                        </div>
                        <div class="row rr-2 text-center">
                            <div class="col-3">
                                <div class="bg dt_nav_btn">
                                    <img src="img/xt-2.png" alt="">
                                </div>
                                <div class="dt_nav_content" id="dt_nav_content">
                                    <span>Email</span>
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="bg dt_nav_btn1">
                                    <img src="img/xt-3.png" alt="">
                                </div>
                                <div class="dt_nav_content1" id="dt_nav_content1">
                                    <span>QQ</span>
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="bg dt_nav_btn2">
                                    <img src="img/xt-4.png" alt="">
                                </div>
                                <div class="dt_nav_content2" id="dt_nav_content2">
                                    <span>Wechat</span>
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="bg dt_nav_btn3">
                                    <img src="img/xt-5.png" alt="">
                                </div>
                                <div class="dt_nav_content3" id="dt_nav_content3">
                                    <span>Weibo</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-inner">
        <div class="footer">
            <p>Copyright &copy; 2019   All Rights Reserved Design by Shulan</p>
        </div>
    </div>
    <div id="toTop">
        <img src="img/toTop-1.jpg" alt="">
    </div>



    <div class="dj">
        <div class="dj-wrapper">
            <div class="dj-content">
                <span>2232794805@qq.com</span>
                <div class="dj-btn">
                    ×
                </div>
            </div>
        </div>
    </div>

    <div class="dj1">
        <div class="dj-wrapper1">
            <div class="dj-content1">
                <img src="img/mm-1.jpg" alt="">
                <div class="dj-btn1">
                    ×
                </div>
            </div>
        </div>
    </div>


    <div class="dj2">
        <div class="dj-wrapper2">
            <div class="dj-content2">
                <img src="img/mm-2.jpg" alt="">
                <div class="dj-btn2">
                    ×
                </div>
            </div>
        </div>
    </div>



    <div class="dj3">
        <div class="dj-wrapper3">
            <div class="dj-content3">
                <img src="img/mm-3.jpg" alt="">
                <div class="dj-btn3">
                    ×
                </div>
            </div>
        </div>
    </div>



</body>



<script src="swiper-4.5.0/dist/js/swiper.min.js"></script>
<script src="js/script.js"></script>
</html>